Ejercicios Miriada X

Publicación de los ejercicios propuestos en el curso de MiriadaX

HTML5, CSS3 y JQuery

Logo de HTLM5, CSS3 y JQuery

Secciones y líneas generales de un documento HTML5.

Publicado por José Maldonado el 16 de marzo de 2018.

La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el perfil de cualquier documento.

Problemas resueltos por HTML5

La definición de la estructura de un documento en HTML 4 y su algoritmo de perfilado es muy tosco y genera numerosos problemas:

  1. HTML5 quita la necesidad de elementos <div> para definir secciones semánticas sin definir valores específicos para los atributos class, introduciendo un nuevo elemento, <section>, el elemento de sección HTML.
  2. Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal. Esto se resuelve en HTML5 con los elementos de seccionado (<article>, <section>, <nav> y <aside>) son siempre subsecciones de su sección ancestral más cercana.
  3. HTML5 introduce el elemento <hgroup> que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup> crea el perfil 1. Justine).
  4. Un documento puede tener secciones especiales conteniendo información relacionada que no es parte del flujo principal. HTML5 introduce el elemento<aside> permitiendo a dichas secciones no ser parte del perfil principal.
  5. Hay información relacionada no al documento pero si al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: <nav> para colecciones de enlaces, como una tabla de contenidos, <footer> y <header> información relacionada con el sitio.

De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los perfiles del documento ser predecibles y usados por el navegador para mejorar la experiencia del usuario.

Estructura básica de una página HTML5

Un documento web (o página web) es un conjunto de tags HTML que se escriben en un editor de texto plano (sin formato) y se ejecutan en un navegador web.

<!DOCTYPE html>
<html>
   <head>
     Información técnica sobre el documento....
   </head>
   <body>
     Contenido que aparece en el documento....
   </body>
</html>

<!DOCTYPE html> Como se puede observar en el ejemplo anterior, una página web escrita en HTML5 comienza con la definición DTD, que de su nombre en inglés, estas siglas significan Definición del Tipo de Documento (Document Type Definition). Esta línea contiene un tag que es altamente recomendable utilizarla para indicar a los navegadores webs qué estándares serán utilizados para mostrar el contenido de la página. En el ejemplo que se muestra, el DTD que se especifica es para una página escrita para HTML5. Para saber más acerca de los tipos de documentos en la web visita: Akus Diseño Web.

<html> El elemento HTML (o elemento HTML raiz) representa la raiz de un documento HTML. El resto de elementos descienden de este elemento. Dado que el elemento <html> es el primero en un documento, aparte de los comentarios, se llama el elemento raíz. A pesar de que esta etiqueta puede ser implícita, o no requerida en HTML, sí es requerida para abrir y cerrar en XHTML. Este elemento se cierra al final del documento HTML con </html>. Leer más...

<head> HEAD traducido del ingles al español significa "cabeza", por eso a esta parte del documento la llamamos cabecera. En el documento HTML comienza con la etiqueta <head> y se indica su final con la etiqueta </head>, se escribe así:

<!DOCTYPE html>
<html>
   <head>
     En esta parte se escribe la
     información técnica sobre el documento....
   </head>
   <body>
     Contenido que aparece en el documento....
   </body>
</html>

El HEAD es la parte donde se incluye la información acerca del documento, podríamos atrevernos a decir que el HEAD es una sección de un documento HTML meramente "técnica e informativa", pues la mayoría de esta información no la muestra el navegador al usuario e inclusive pudiéramos dejarla vacía y esto no afectaría al funcionamiento o la forma en que se visualiza la página, y si bien el HEAD de un documento HTML pudiera ir vacío siempre es mejor darles la suficiente importancia a las etiquetas que el HEAD contiene, mucho más aún si nuestro objetivo es publicar nuestro trabajo en la web, pues muchas de las etiquetas del HEAD son importantes para los buscadores y para un buen posicionamiento en los resultados de búsqueda. Para obtener mayor información acerca de <head>, sus atributos y propiedades revisa este documento...

<body> El cuerpo de un documento HTML es la parte central de una página web, este se define por medio de la etiqueta BODY. De las dos partes en que se divide un documento HTML (HEAD y BODY), BODY es la segunda. BODY es la etiqueta usada para indicar el cuerpo de un documento HTML, es la parte donde se describe el contenido de la página (su estructura, su forma, sus colores, texto, y todo lo visual), su inicio lo indica la etiqueta <body> y su final con la etiqueta </body>. El BODY de un documento web suele subdividirse en Encabezado (HEADER), Contenido principal (SECTION o DIV), Contenido secundario o complementario (ASIDE) y Pie del documento FOOTER. Leer más...

El algoritmo de perfilado de HTML5

Definiendo secciones en HTML5

Todo el contenido incluido dentro del elemento <body> es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento <body>, los límites de la sección son definidos explícita o implícitamente. Las secciones definidas explícitamente son el contenido definido en las etiquetas <body>, <section>, <article>, <aside>, <footer>, <header>, y <nav>.

Nota: Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento <h1>. Consulte también Definiendo cabeceras en HTML5 en la documentación de Mozilla.

Ejemplo:

<section>
   <h1>Forest elephants</h1>
   <section>
      <h1>Introduction</h1>
      <p>In this section, we discuss the lesser known forest elephants.</p>
   </section>
   <section>
      <h1>Habitat</h1>
      <p>Forest elephants do not live in trees but among them.</p>
   </section>
   <aside>
      <p>advertising block</p>
   </aside>
</section>
<footer>
   <p>(c) 2010 The Example company</p>
</footer>
</body>
</html>